<template>
  <div>
    <div class="monthChart">
      <div>
        <el-row>
          <h3>日报</h3>
          <el-button type="primary" plain @click="setYear(2017)">2017</el-button>
          <el-button type="primary" plain @click="setYear(2018)">2018</el-button>
          <el-button type="primary" plain @click="setYear(2019)">2019</el-button>
          <el-button type="primary" plain @click="setYear(2020)">2020</el-button>
        </el-row>
        <br />
        <el-row>
          <el-button type="success" plain @click="getMonthChart(1)">1月</el-button>
          <el-button type="success" plain @click="getMonthChart(2)">2月</el-button>
          <el-button type="success" plain @click="getMonthChart(3)">3月</el-button>
          <el-button type="success" plain @click="getMonthChart(4)">4月</el-button>
          <el-button type="success" plain @click="getMonthChart(5)">5月</el-button>
          <el-button type="success" plain @click="getMonthChart(6)">6月</el-button>
          <el-button type="success" plain @click="getMonthChart(7)">7月</el-button>
          <el-button type="success" plain @click="getMonthChart(8)">8月</el-button>
          <el-button type="success" plain @click="getMonthChart(9)">9月</el-button>
          <el-button type="success" plain @click="getMonthChart(10)">10月</el-button>
          <el-button type="success" plain @click="getMonthChart(11)">11月</el-button>
          <el-button type="success" plain @click="getMonthChart(12)">12月</el-button>
        </el-row>
      </div>
      <div id="monthChart" style="width: 1000px;height:400px;"></div>
      <div class="yearChart">
        <el-row>
          <h3>季度报表</h3>
          <el-button type="warning" plain @click="getYearChart(2017)">2017</el-button>
          <el-button type="warning" plain @click="getYearChart(2018)">2018</el-button>
          <el-button type="warning" plain @click="getYearChart(2019)">2019</el-button>
          <el-button type="warning" plain @click="getYearChart(2020)">2020</el-button>
        </el-row>
        <div id="yearChart" style="width: 500px;height:400px;"></div>
      </div>
      <div class="pie">
        <el-row>
          <h3>年度类别销量份额</h3>
          <el-button type="warning" plain @click="getSaleChart(2017)">2017</el-button>
          <el-button type="warning" plain @click="getSaleChart(2018)">2018</el-button>
          <el-button type="warning" plain @click="getSaleChart(2019)">2019</el-button>
          <el-button type="warning" plain @click="getSaleChart(2020)">2020</el-button>
        </el-row>
        <div id="saleChart" style="width: 500px;height:400px;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  listMonthChart,
  listYearChart,
  listSaleChart
} from "@/api/system/charts";
export default {
  data() {
    return {
      monthAxis: [],
      monthSeries: [],
      monthData: [],
      year: 0,
      yearAxis: [],
      yearSeries: [],
      yearData: [],
      saleAxis: [],
      saleSeries: [],
      saleData: [
        {
          value: null,
          name: null
        }
      ]
    };
  },
  methods: {
    setYear(year) {
      this.year = year;
    },
    getMonthChart(month) {
      //console.log(month);
      this.monthAxis.length = 0;
      this.monthSeries.length = 0;
      listMonthChart("day", this.year, month, 1).then(response => {
        //console.log(response.data),
        this.monthData = response.data;
        this.monthData.forEach(e => {
          this.monthSeries.push(e.total);
          var index1 = e.time.indexOf("-");
          var index2 = e.time.lastIndexOf("-");
          var cha = parseInt(index2) - (parseInt(index1) + 1);
          var day = e.time.substr(parseInt(index2) + 1, cha);
          this.monthAxis.push(day);
        });
        // console.log(this.monthSeries)
        // console.log(this.monthAxis);
      });
      this.drawMonthChart();
    },

    drawMonthChart() {
      //2. 基于准备好的dom，初始化echarts实例
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("monthChart"));
      //3. 指定图表的配置项和数据
      let that = this;
      var option = {
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value",
          name: "元"
        },
        series: [
          {
            data: [],
            type: "line"
          }
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。

      option.xAxis.data = that.monthAxis;
      console.log(option.xAxis.data);

      option.series[0].data = that.monthSeries;
      console.log(option.series[0].data);

      setTimeout(function() {
        myChart.setOption(option);
      }, 500);
    },
    getYearChart(year) {
      this.yearAxis.length = 0;
      this.yearSeries.length = 0;
      listYearChart("quarter", year).then(response => {
        //console.log(response.data),
        this.yearData = response.data;
        this.yearData.forEach(e => {
          this.yearSeries.push(e.total);
        });
        // console.log(this.monthSeries)
        // console.log(this.monthAxis);
      });
      this.drawYearChart();
    },
    drawYearChart() {
      //2. 基于准备好的dom，初始化echarts实例
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("yearChart"));
      //3. 指定图表的配置项和数据
      let that = this;
      var option = {
        xAxis: {
          type: "category",
          data: ["第一季度", "第二季度", "第三季度", "第四季度"]
        },
        yAxis: {
          type: "value",
          name: "元"
        },
        series: [
          {
            data: [],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。

      option.series[0].data = that.yearSeries;
      console.log(option.series[0].data);

      setTimeout(function() {
        myChart.setOption(option);
      }, 500);
    },
    getSaleChart(year) {
      //console.log(month);
      this.saleAxis.length = 0;
      this.saleSeries.length = 0;
      listSaleChart(year).then(response => {
        //console.log(response.data),
        this.saleData = response.data;
       this.saleData.forEach(item => {
                   this.saleSeries.push({
                      value: item.total ,
                      name: item.time
                   });
              });
        console.log(this.saleSeries)
        // console.log(this.monthAxis);
      });
      this.drawSaleChart();
    },
    drawSaleChart() {
      //2. 基于准备好的dom，初始化echarts实例
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("saleChart"));
      //3. 指定图表的配置项和数据
      let that = this;
      var option = {
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。

      option.series[0].data = that.saleSeries;
      console.log(option.series[0].data);

      setTimeout(function() {
        myChart.setOption(option);
      }, 500);
    }
  },
  mounted() {
    this.drawYearChart();
    this.drawMonthChart();
     this.drawSaleChart();
  }
};
</script>